import React, { PureComponent } from 'react';
import { Button, Card, Table,Pagination,Modal, message } from 'antd';
import { PageContainer } from '@ant-design/pro-layout'
import {getDynamic,deleteDynamic} from '@/services/notice'
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            data:[],
            count:1,
            currentPage:1
        }
    }
    applyList=(page:number)=>{
        getDynamic({page}).then(res=>{
            if(!res)return
            this.setState({
                data:res.data,
                count:res.count
            })
        })
    }
    componentDidMount() {
        this.applyList(0)
    }
    changePage=(e:any)=>{
        this.applyList(e-1)
        this.setState({
            currentPage:e
        })
    }
    deleteHandle=(id:any)=>()=>{
        Modal.confirm({
            title:'提示',
            content:'确定删除这条动态？',
            onOk:()=>{
                deleteDynamic({id}).then(res=>{
                    if(res.static===1){
                        message.success('已删除')
                        this.applyList(0)
                        this.setState({
                            currentPage:1
                        })
                    }else{
                        message.error('删除失败')
                    }
                })
            }
        })
    }
    render() {
        const {data,count,currentPage} = this.state;
        const columns = [
            {
                title: '封面',
                dataIndex: 'cover',
                render: (cover: string) => {
                    return cover?<img src={cover} onClick={() => window.open(cover)} style={{ height: 100, width: 100, objectFit: 'cover' }} alt=" " />:'-'
                }
            },
            {
                title: '标题',
                dataIndex: 'title',
              
            },
            {
                title: '时间',
                dataIndex: 'created_at',
                render: (created_at:any) => {
                    return <p style={{width:150}}>
                       {created_at}
                    </p>
                }
            },
            // {
            //     title: '浏览次数',
            //     dataIndex: 'num',
            //     render: (num) => {
            //         return <p style={{width:100}}>
            //            {num}
            //         </p>
            //     }
            // },
            {
                title: '操作',
                dataIndex: 'id',
                render: (id:any) => {
                    return <div style={{width:150}}>
                        <a style={{ marginRight: 20 }} onClick={()=>this.props.history.push('/notice/dynamic/edit/'+id)}>编辑</a>
                        <a onClick={this.deleteHandle(id)}>删除</a>
                    </div>
                }
            },
        ]
        return (
            <PageContainer>
                <Card bordered={false}>
                    <div style={{ overflow: 'hidden', marginBottom: 20 }}>
                        <Button style={{ float: 'right' }} type="primary" onClick={()=>this.props.history.push('/notice/dynamic/add')}>添加动态</Button>
                    </div>
                    <Table rowKey="id" dataSource={data} columns={columns} pagination={false}>

                    </Table>
                    <Pagination style={{ float: 'right', marginTop: 20 }} current={currentPage}   onChange={this.changePage} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                </Card>
            </PageContainer>
        );
    }
}

export default Index;
